
<!DOCTYPE html>
<html>

<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Mobile Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>Coffeee</title>

  <!-- slider stylesheet -->
  <link rel="stylesheet" type="text/css" href="../static/css/owl.carousel.min.css" />

  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" />

  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,700&display=swap" rel="stylesheet" />

  <!-- Custom styles for this template -->
  <link href="../static/css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="../static/css/responsive.css" rel="stylesheet" />
</head>

<body>

<div style="background-color: #b8bcb8;width: 70%;margin-left: 15%;margin-top: 5%">
  <table class="table table-hover" style="text-align: center">
  <tr>

        <td><h4>序列</h4></td>
        <td><h4>名字</h4></td>
        <td><h4>用户名</h4></td>
        <td><h4>年龄</h4></td>
        <td><h4>图片</h4></td>
    </tr>
{% for student in students %}

    <tr>

        <td >{{ student.0 }}&nbsp;&nbsp;</td>
        <td >{{ student.1 }}&nbsp;&nbsp;</td>
        <td >{{ student.2 }}&nbsp;&nbsp;</td>
        <td >{{ student.3 }}&nbsp;&nbsp;</td>
        <td >{{ student.4 }}&nbsp;&nbsp;</td>
    </tr>

{% endfor %}

</table>

</div>
  <!-- story section -->
  <section class="layout_padding story_section" id="about">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="story-detail">
            <h2>
              测试数据库
            </h2>

            <p>
            详情请看项目的说明文件广泛的规范郭德纲个地方个地方咕咚咕咚风格的咕咚咕咚
                富贵花富贵皇华富贵花
            </p>

            <div class="story_btn-container">
              <a href="#" class="btn story_btn">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="justify-content-center justify-content-md-end story_img-box">
            <img src="../static/images/cup.jpg" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end story section -->

  <script type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="../static/js/bootstrap.js"></script>
  <script type="text/javascript" src="../static/js/owl.carousel.min.js">
  </script>
  <script type="text/javascript">
    $(".owl-carousel").owlCarousel({
      loop: true,
      margin: 20,
      nav: true,
      navText: [],
      autoplay: true,
      autoplayHoverPause: true,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 2
        },
        1000: {
          items: 3
        }
      }
    });
  </script>
</body>

</html>